<template>
  <div class="engineer">
    <!-- 搜索 -->
    <search-bar @search="search">
      <single-search v-model="param.userName" label="客户名称"></single-search>
      <!-- <select-search v-model="param.state" label="维修进度" :options="order_status_MAP2" labelKey="name" valueKey="id">
      </select-search> -->
      <SelectSearchId
        v-model="param.state"
        :options="stateList"
        :clearable="false"
        filterable
        label="维修进度"
      ></SelectSearchId>
    </search-bar>
    <div class="table-wrapper">
      <el-table :data="tableData" border stripe style="width: 100%;">
        <el-table-column prop="number" label="报修编号" min-width="120px" width="160px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="报修时间" min-width="150px" width="160px"></el-table-column>
        <el-table-column prop="userName" label="客户名称" min-width="100px" width="100px"></el-table-column>
        <el-table-column prop="description" label="报修内容" min-width="100px" width="140px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="handleTime" label="要求上门维修时间" min-width="80px" width="160px"></el-table-column>
        <el-table-column prop="engineer" label="工程师" width="80px"></el-table-column>
        <el-table-column prop="state" label="维修进度" width="80px">
          <template slot-scope="{ row }">{{ order_status_MAP2[row.state] }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100px">
          <template slot-scope="{ row }">
            <OperateBtn type="detail" @click="goDetail(row.id)"/> <!--详情-->
            <OperateBtn type="delete" v-if="row.state !== 2"  @click="goBack(row.id)"/> <!--退回-->
            <OperateBtn type="personDetail" v-if="row.state === 3" @click="onConfirm(row)"/> <!--确认订单-->
            <OperateBtn type="qrcode" v-if="row.state === 3" @click="toHandle(row,param.userId,3)"/> <!--指派给他人-->
            <OperateBtn type="carManage" v-if="row.state === 1" @click="toHandle(row,param.userId,1)"/> <!--处理反馈-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      :current-page.sync="page"
      :page-size.sync="pageSize"
      @size-change="size => search(1, size)"
      @current-change="search"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    <engineerDialog ref="engineerDialog" @reload="search(page)"/>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import SingleSearch from '@/components/SearchBar/SingleSearch'
import SelectSearch from '@/components/SearchBar/SelectSearch'
import SelectSearchId from '@/components/SearchBar/SelectSearchId'
import { mapGetters } from 'vuex';
import OperateBtn from '@/components/OperateBtn'
import engineerDialog from "./engineerDialog";
import * as OrderAction from '@/api/order'
import { order_status_MAP2 } from '@/assets/js/enum'
import {Message} from "element-ui";
export default {
  name: "engineer",
  components: {
    SearchBar,
    SingleSearch,
    SelectSearch,
    OperateBtn,
    engineerDialog,
    SelectSearchId
  },
  data() {
    return {
      param: {
        state: 1
      },
      total: 0,
      page: 1,
      pageSize: 10,
      tableData: [],
      engineerList: [],
      order_status_MAP2,
      openId: null,
      stateList: [
        {
          id: 1,
          name: '处理中'
        },
        {
          id: 2,
          name: '已完成'
        },
        {
          id: 3,
          name: '待处理'
        },
      ], // 订单状态列表
    }
  },
  computed: {
    ...mapGetters(['userInfoObj']),
  },
  methods: {
    // 跳转至详情
    goDetail (id) {
      // 跳转详情页
      this.$router.push({ path: '/orderManagement/detail', query: { id } })
    },
    // 去处理
    toHandle(row,userId,type) {
      this.$refs.engineerDialog.show(row,userId,type);
    },
    // 确认订单
    async onConfirm(row) {
      this.$confirm('是否确认当前订单？', '提示').then(async () =>{
        let param = {
          number: row.number, // 报修单号
          state: 1, // 维修状态
          userId: this.param.userId, // 用户ID
          id: row.id, // 当前列表id
          ordEngId: row.ordEngId // 订单Id
        }
        let res = await OrderAction.updateAssign(param);
        if (res) {
          this.$message.success(res.message);
          this.search();
        }
      })
    },
    // 退回
    async goBack(id){
      this.$confirm('是否确认退回当前订单？', '提示').then(async () =>{
        let res = await OrderAction.backOrder(id);
        if (res) {
          this.$message.success('退回成功');
          this.search();
        }
      })
    },
    // 获取用户信息
    async getUserInfo() {
      try {
        const res = await OrderAction.getUserInfoByOpenId(this.userInfoObj.openId);
        this.param.userId = res.id;
      } catch (e) {
        Message.error(e.message);
      }

    },
    // 查询订单列表
    async search (page = 1, size) {
      // size change、按条件搜索时重置页码为1
      if (page === 1) this.page = 1
      const param = {
        pageNum: page,
        pageSize: size || this.pageSize,
        ...this.param
      }
      try {
        const res = await OrderAction.getOrderList(param);
        this.tableData = [];
        res.dataList.forEach(item => {
          this.tableData.push(item.order);
        })
        console.log('我要的数据', this.tableData);
        this.total = res.totalSize
      } catch (e) {
        Message.error(e.message);
      }
    },
  },
  async created () {

      await this.getUserInfo();
      await this.search();

  }
}
</script>

<!--<style scoped>-->

<!--</style>-->
